<template>
  <!--审批-->
  <div>
    <!--审批查找-->
    <el-row>
      <span style="padding: 0 10px"><i class="font-14 el-icon-s-open"></i></span>
      <el-select v-model="filterValue" @change="initData(currPage,pageSize,filterValue,emp.empId,content)" placeholder="全部数据" style="width: 120px">
        <el-option-group v-for="group in filterOptions" :key="group.label" :label="group.label">
          <el-option v-for="item in group.options" :key="item.value" :label="item.label" :value="item">
          </el-option>
        </el-option-group>
      </el-select>
      <span style="padding: 0 10px 0 30px"><i class="fn el-icon-message-solid"></i></span>
      <el-input v-model="content" placeholder="请输入内容" clearable style="width: 150px"></el-input>
      <el-select v-model="vagueValue" placeholder="审批主题" style="width: 120px">
        <el-option v-for="item in vagueOptions" :key="item.value"
                   :label="item.label" :value="item.value">
        </el-option>
      </el-select>
      <el-button @click="initData(currPage,pageSize,filterValue,emp.empId,content)" icon="el-icon-search" size="small" circle></el-button>
    </el-row>
    <!--审批数量-->
    <el-row style="margin-top: 15px">
      <el-col :span="12" style="margin-bottom: 20px">
        <span>审批表</span>
        <small class="text-muted font-13">共{{totalSize}}条</small>
      </el-col>
    </el-row>
    <!--审批表格-->
    <el-table ref="multipleTable" :data="approvalList" tooltip-effect="dark" id="outTable"
              style="width: 100%"  border :header-cell-style="rowClass">
      <el-table-column prop="approvalId" label="ID" sortable width="80"></el-table-column>
      <!--1出差 2报价 3合同订单 4采购-->
      <el-table-column label="分类" width="120">
        <template slot-scope="scope">
          <span v-if="scope.row.approvalClassify === 1">{{flOptions[0].label}}</span>
          <span v-if="scope.row.approvalClassify === 2">{{flOptions[1].label}}</span>
          <span v-if="scope.row.approvalClassify === 3">{{flOptions[2].label}}</span>
          <span v-if="scope.row.approvalClassify === 4">{{flOptions[3].label}}</span>
          <span v-if="scope.row.approvalClassify === 5">{{flOptions[4].label}}</span>
        </template>
      </el-table-column>
      <el-table-column label="审批内容" prop="approvalContent" width="120">
      </el-table-column>
      <el-table-column prop="approvalTheme" label="主题">
        <template slot-scope="scope">
            <router-link :to="{path:'approvalview',query: {appId: scope.row.approvalId}}">
              <div style="color: #333333">
                <i class="el-icon-caret-right"></i>
                <span>{{scope.row.approvalTheme}}</span>
              </div>
            </router-link>
        </template>
      </el-table-column>
      <el-table-column prop="employeeByApplicantEmpId.empName" label="申请人"></el-table-column>
      <el-table-column prop="employeeByApprovalEmpId.empName" label="审批人" ></el-table-column>
      <el-table-column prop="approvalDate" label="创建日期" sortable>
        <template slot-scope="scope">
          <span>{{scope.row.approvalDate | formatDateJudge}}</span>
        </template>
      </el-table-column>
      <el-table-column label="状态"  width="120">
        <template slot-scope="scope">
          <span class="font-18" v-if="scope.row.approvalStatus === 1">
            <el-tooltip class="item" effect="dark" content="待审" placement="bottom">
              <i class="el-icon-s-opportunity"/>
            </el-tooltip>
          </span>
          <span class="font-18" v-if="scope.row.approvalStatus === 2">
            <el-tooltip class="item" effect="dark" content="同意" placement="bottom">
              <i class="el-icon-circle-check"/>
            </el-tooltip>
          </span>
          <span class="font-18" v-if="scope.row.approvalStatus === 3">
            <el-tooltip class="item" effect="dark" content="否决" placement="bottom">
              <i class="el-icon-circle-close"/>
            </el-tooltip>
          </span>
          <span class="font-14" v-if="scope.row.approvalStatus === 4">撤销</span>
          <span class="font-14" v-if="scope.row.approvalStatus === 5">重审</span>
        </template>
      </el-table-column>
      <el-table-column prop="" label="操作" width="120">
        <template slot-scope="scope">
          <span v-if="scope.row.approvalStatus === 1">
            <el-tooltip class="item" effect="dark" content="审批" placement="bottom">\
              <router-link :to="{path:'approvalview',query: {appId: scope.row.approvalId}}">
                <span class="font-18"><i class="el-icon-thumb"/></span>
              </router-link>
            </el-tooltip>
          </span>
          <!--根据分类判断去往哪个视图 出差1报价2合同3采购4-->
          <el-tooltip class="item" effect="dark" content="继续" placement="bottom">
            <router-link v-if="scope.row.approvalClassify === 1"
                         :to="{path:'/businessview',query:{businessId:scope.row.businesstripByBusinessId.businessId}}">
                <span style="color: #333333">
                  <span><i class="el-icon-d-arrow-right"/></span>
                </span>
            </router-link>
            <router-link v-if="scope.row.approvalClassify === 2"
                         :to="{path:'/quotationview',query:{quoId:scope.row.quotationByQuotationId.quotationId}}">
                <span style="color: #333333">
                  <span><i class="el-icon-d-arrow-right"/></span>
                </span>
            </router-link>
            <router-link v-if="scope.row.approvalClassify === 3"
                         :to="{path:'/contractview',query:{contractId:scope.row.contractByContractId.contractId}}">
                <span style="color: #333333">
                  <span><i class="el-icon-d-arrow-right"/></span>
                </span>
            </router-link>
            <router-link v-if="scope.row.approvalClassify === 4"
                         :to="{path:'/purchaseview',query:{purId:scope.row.purchaseByPurchaseId.purchaseId}}">
                <span style="color: #333333">
                  <span><i class="el-icon-d-arrow-right"/></span>
                </span>
            </router-link>
            <router-link v-if="scope.row.approvalClassify === 5"
                         :to="{path:'/plannedpaymentview',query:{payId:scope.row.paymentPlanByPaymentPlanId.paymentPlanId}}">
                <span style="color: #333333">
                  <span><i class="el-icon-d-arrow-right"/></span>
                </span>
            </router-link>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-row style="margin-top:10px">
      <el-col :offset="8" :span="14">
        <el-pagination layout="sizes,prev,pager, next, jumper" :total="totalSize" @current-change="changePage"
                       :current-page.sync="currPage" :page-size="pageSize" :page-sizes="pageSizes" @size-change="changeSize"></el-pagination>
      </el-col>
      <el-col :span="2">
        <el-tooltip class="item" effect="dark" content="打印列表" placement="bottom">
          <el-button @click="handleWindowPrint('#outTable', '列表打印')" style="padding: 12px 12px" type="info" plain  icon="el-icon-printer"></el-button>
        </el-tooltip>
        <el-tooltip class="item" effect="dark" content="导出Excel格式数据" placement="bottom">
          <el-button @click="exportExcel" style="padding: 12px 12px" type="info" plain  icon="el-icon-document-remove"></el-button>
        </el-tooltip>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import {formatTimeToStr} from "../assets/format";
  import XLSX from "xlsx";
  import FileSaver from "file-saver";

  export default {
  data () {
    return {
      emp:{},
      approvalList: [],
      pageSize: 10, // 分页页大小
      pageSizes:[10,20,30],
      currPage: 1, // 当前页码，默认为1
      totalSize: 0, // 总记录数
      flOptions:[{
        value: 1,
        label: '出差'
      }, {
        value: 2,
        label: '报价单'
      }, {
        value: 3,
        label: '合同订单'
      }, {
        value: 4,
        label: '采购单'
      }, {
        value: 5,
        label: '付款计划'
      }],
      filterOptions: [{
        label: '',
        options: [{
          value: 0,
          label: '全部数据',
          num:0
        }]
      }, {
        label: '状态',
        options: [{
          value: 1,
          label: '待审',
          num:1
        },{
          value: 2,
          label: '同意',
          num:2
        },{
          value: 3,
          label: '否决',
          num:3
        },{
          value: 4,
          label: '撤销',
          num:4
        },{
          value: 5,
          label: '重审',
          num:5
        }]
      },{
        label: '我申请',
        options: [{
          value: 6,
          label: '我申请:待审批',
          num:1
        },{
          value: 7,
          label: '我申请:同意',
          num:2
        },{
          value: 8,
          label: '我申请:否决',
          num:3
        }]
      },{
        label: '我审批',
        options: [{
          value: 9,
          label: '我审批:待审批',
          num:1
        },{
          value: 10,
          label: '我审批:同意',
          num:2
        },{
          value: 11,
          label: '我审批:否决',
          num:3
        }]
      }],
      filterValue: {
        value: 0,
        label: '全部数据',
        num:0
      },
      vagueOptions: [{
        value: 1,
        label: '审批主题'
      }],
      vagueValue: 1,
      content:'',//搜索框内容
      selectList:[]
    }
  },
  methods: {
    // 查询当前员工
    loginEmp(){
      this.$axios.get('http://localhost:8088/emp')
        .then(v => {
          this.emp = v.data
          this.initData(this.currPage,this.pageSize,this.filterValue,this.emp.empId,this.content)
        })
        .catch(function (v) {})
    },
    // 默认查询所有审批
    initData(currPage,pageSize,filter,empId,content){
      this.$axios.get('http://localhost:8088/app-list',{
        params:{
          page:currPage,
          size:pageSize,
          type:filter.value,
          num:filter.num,
          empId:empId,
          appTheme:content
        }
      })
        .then(v => {
          this.approvalList = v.data.rows
          this.totalSize = v.data.total
        })
        .catch(function (v) {})
    },
    // 表格分页
    changePage (val) {
      this.initData(val,this.pageSize,this.allValue,this.emp.empId,this.content)
    },
    //改变页大小
    changeSize(val){
      this.pageSize = val
      this.currPage = 1
      this.initData(this.currPage,this.pageSize,this.filterValue,this.emp.empId,this.content)
    },
    // pdf打印
    handleWindowPrint (ele, fileName) {
      document.body.innerHTML = document.querySelector(ele).outerHTML
      // 转异步 等待dom元素渲染（样式）完毕在打印
      setTimeout(() => {
        // 打印
        window.print()
        // 刷新页面
        window.location.reload()
      }, 20)
    },
    //导出excel
    exportExcel () {
      var xlsxParam = { raw: true };//转换成excel时，使用原始的格式
      var wb = XLSX.utils.table_to_book(document.querySelector("#outTable"),xlsxParam);
      var wbout = XLSX.write(wb, {
        bookType: "xlsx",
        bookSST: true,
        type: "array"
      });
      try {
        FileSaver.saveAs(
          new Blob([wbout], { type: "application/octet-stream;charset=utf-8" }),
          "审批导出.xlsx"
        );
      } catch (e) {
        if (typeof console !== "undefined") console.log(e, wbout);
      }
      return wbout;
    },
    // 表头靠左样式
    rowClass(){
      return "text-align:left"
    }
  },
  created() {
    this.loginEmp()
  },
    filters: {
      formatDateJudge: function(time) {
        if(time != null && time != "")
        {
          let date = new Date(time);
          let currentDate = new Date()
          let seperator1 = "-";
          let month = currentDate.getMonth() + 1<10? "0"+(currentDate.getMonth() + 1):currentDate.getMonth() + 1;
          let strDate = currentDate.getDate()<10? "0" + currentDate.getDate():currentDate.getDate();
          let today = currentDate.getFullYear() + seperator1  + month  + seperator1  + strDate
          let todayTime = new Date(today)
          let yesterday = todayTime.setDate(todayTime.getDate() - 1)
          let beforeYesterday = todayTime.setDate(todayTime.getDate() - 1)
          let tomorrow = todayTime.setDate(todayTime.getDate() + 3)
          let afterTomorrow = todayTime.setDate(todayTime.getDate() + 1)
          todayTime.setDate(todayTime.getDate() - 2)
          if (date.getTime() === todayTime.getTime()){
            return '今天'
          }else if (date.getTime() ===  yesterday){
            return '昨天'
          }else if (date.getTime() ===  beforeYesterday){
            return '前天'
          }else if (date.getTime() ===  tomorrow){
            return '明天'
          }else if (date.getTime() ===  afterTomorrow){
            return '后天'
          }else {
            return time
          }
        }else{
          return "";
        }
      }
    }
  }
</script>

<style>
</style>
